<template>
	<view class="page">
		<cu-custom  bgColor="bg-orange-form" :isBack="true">
		    <block slot="content">组局信息发布</block>
		</cu-custom>
		<view class="join_form">
			<view style="border-radius: 20rpx;background: #fff;">
				<form>
					<view class="cu-form-group">
						<view class="title">预定卡座</view>
						 <picker
						      mode="selector"
						      :range="booth_list"
						      range-key="title"
						      @change="select_booth"
						    >
						      <view class="picker">
						        {{ selectedBooth.title ? selectedBooth.title : '选择卡座' }}
						      </view>
						    </picker>
					</view>
					<view class="cu-form-group">
						<view class="title">玩法</view>
						<input placeholder="玩法" name="input"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">要求</view>
						<input placeholder="要求" name="input"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">联系人</view>
						<input placeholder="联系人" name="input"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">联系方式</view>
						<input placeholder="联系方式" type="number" name="input"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">限制人数</view>
						<input placeholder="限制人数" type="number" name="input"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">时间</view>
						<input placeholder="时间" name="input"></input>
					</view>
					<view class="cu-form-group" style="border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;">
						<view class="title">备注</view>
						<input placeholder="备注" name="input"></input>
					</view>
					
				</form>
				<view class="text-center padding-lr-sm">
					<view class="flex align-center">
						<checkbox-group class="block" @change="select_aggree">
							<checkbox style="transform:scale(0.7)" :class="form.agree ? 'checked' : ''"  value="1"  class="round orange"  ></checkbox>
						</checkbox-group>
						<view class=" text-gray">我已阅读并同意 <span class="text-orange-light">《用户组局规则协议》</span></view>
					</view>
					<button class="cu-btn bg-orange-dark round   lg margin-tb-lg" @click="group_detail" style="width: 90%;text-align: center;">免费组局</button>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form : {
					agree : true
				},
				// 包厢列表
			  booth_list: [
				{ id: 1, title: '转转麻将豪华包间1' },
				{ id: 2, title: '转转麻将豪华包间2' },
				{ id: 3, title: '转转麻将豪华包间3' },
			  ],
			  // 当前选中的包厢
			  selectedBooth: {}, // 默认选中第一个
				
			}
		},
		methods: {
			select_booth(event) {
			      const index = event.detail.value; // 获取选中的索引
			      this.selectedBooth = this.booth_list[index]; // 更新选中的包厢
			    },
			select_aggree(e){
				
				var  values = e.detail.value[0];
				if(values){
					this.form.agree = true
				}else{
					this.form.agree = false
				}
			},
			group_detail(){
				uni.navigateTo({
					url:'/pages/shop/group_detail'
				})
			}
		}
	}
</script>

<style scoped>
	.page{
		background: linear-gradient(180deg, rgba(254, 163, 102, 1) 0%, rgba(255, 87, 51, 1) 100%);height: 100vh
	}
	.join_form{
		padding-top: 0;
		padding: 24rpx;
		border-radius: 10rpx;
	}
	.join_form .title{
		width: 250rpx;
	}
</style>
